<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-t-10">
			<u-tabs :list="tabList" :current="current" active-color="#B3723E" bg-color="transparent"
				@change="tabChange"></u-tabs>
		</view>
		<view class="u-m-20">
			<view class="order_box" v-for="item in teaList" :key="item.id" @click="onSwitchDetail(item.id)">
				<view class="u-flex u-row-between u-p-b-10">
					<view>订单号：{{item.order_sn}}</view>
					<view class="u-color-puce">{{getStatusName(item.order_status)}}</view>
				</view>
				<view class="u-font-34 u-font-bold">{{item.title}}</view>
				<view class="goods" v-for="goodsItem in item.goods_json" :key="goodsItem.goods_id">
					<view class="u-flex u-col-top">
						<image :src="goodsItem.goods.head_image[0]"></image>
						<view class="u-m-l-20">
							<view class="u-font-28 u-font-bold">{{goodsItem.goods.name}}</view>
							<view class="u-m-t-15" v-if="item.is_use == 0">
								<span class="u-font-bold u-font-24 u-color-red">¥</span>
								<span class="u-font-bold u-font-36 u-color-red">{{goodsItem.goods.vip_price}}</span>
							</view>
							<view class="u-m-t-15" v-else>
								<span class="u-font-bold u-font-36 u-color-red">{{goodsItem.goods.proportion_vip_price}}积分</span>
							</view>
						</view>
					</view>
					<view class="u-m-t-10 u-color-gray">x{{goodsItem.num}}</view>
				</view>
				<view class="u-m-t-20 u-flex u-row-between total">
					<view>共1件商品</view>
					<view>
						<span>实付款：</span>
						<span class="u-font-bold">{{ item.text }}</span>
					</view>
				</view>


				<view class="u-m-t-30 u-flex u-row-between" v-if="[1].includes(item.order_status)">
					<view class="u-flex u-color-placeholder">
						<u-icon name="clock" size="34"></u-icon>
						<view class="u-font-24 u-m-l-5">剩余时间：</view>
						<u-count-down :timestamp="item.diffTime" color="#ee2424" separator-color="#ee2424"
							font-size="28"></u-count-down>
					</view>
					<view class="u-flex">
						<view class="confirm u-m-r-30" @click.native.stop="onOperate(item.id,1)">关闭订单</view>
						<view class="cancel" @click.native.stop="onOperate(item.id,2)">支付</view>
					</view>
				</view>
				<view class="u-m-t-30 u-flex u-row-right">
					<view class="u-color-puce" v-if="[2].includes(item.order_status)">查看详情</view>
					<view class="cancel u-m-l-20" @click.native.stop="onOperate(item.id,3)" v-if="[3,4].includes(item.order_status)">查看物流</view>  
					<view class="confirm u-m-l-20" @click.native.stop="onOperate(item.id,4)" v-if="[3].includes(item.order_status)">确认收货</view>
				</view>
			</view>
		</view>
		<Loadmore :status="status"></Loadmore>
		<view style="height: 200rpx;"></view>
		<Bottom :isReturn="true" :backUrl="'mine'"></Bottom>

		<!-- 通用提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" @confirm="modalConfirm" @cancel="modal.show = false"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import TeaList from '@/components/TeaList.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	import {
		teaMemberList,
		teaOrderConfirm,
		teaOrderCancel,
		teaOrderPay
	} from '@/network/tea.js'
	import {
		formatDistance,
		pointTransform
	} from '@/utils/index.js'
	export default {
		mixins: [reachBottom],
		components: {
			Navbar,
			Bottom,
			Modal,
			TeaList,
			Loadmore
		},
		data() {
			return {
				tabList: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, {
					name: '已退款'
				}, {
					name: '已取消'
				}],
				current: 0,
				teaList: [],
				status: 'loadmore',
				modal: {
					show: false,
					showCancel: true,
					confirm: '申请',
					cancel: '取消',
					content: '',
					id: 0, // 订单id
					type: 1 // 1 确认收货  2 取消
				}
			}
		},
		onShow() {
			this.page = 1
			this.status = 'loadmore'
			this.teaList = []
			this.onGetTeaList()
		},
		methods: {
			tabChange(val) {
				this.current = val
				this.page = 1
				this.teaList.length = 0
				this.onGetTeaList()
			},
			async onGetTeaList() {
				uni.showLoading({
					title: "加载中"
				})
				const params = {
					page: this.page,
					limit: this.pageSize,
					status: this.current,
					user_id: uni.getStorageSync("user_id")
				}
				const res = await teaMemberList(params)
				this.count = res.data.count
				res.data.list.map(item => {
					if (item.is_use == 1) {
						if (Number(item.pay_price) > 0) {
							item.text = `${item.number}积分  ¥${Number(item.pay_price)}`
						} else {
							item.text = `${item.number}积分`
						}
					} else {
						item.text = `¥${Number(item.pay_price)}`
					}
					if (item.order_status == 1) {
						item.diffTime = (new Date(item.due_time) - new Date()) / 1000
					}
					item.goods_json.map(goodsItem => {
						goodsItem.goods.head_image = goodsItem.goods.head_image.split(',')
					})
					this.teaList.push(item)
				})
				if (this.teaList.length == this.count) this.status = 'nomore'
				uni.hideLoading()
			},
			getStatusName(val) {
				let typeName = ''
				switch (val) {
					case 1:
						typeName = '待付款'
						break;
					case 2:
						typeName = '待发货'
						break;
					case 3:
						typeName = '待收货'
						break;
					case 4:
						typeName = '已完成'
						break;
					case 5:
						typeName = '已退款'
						break;
					case 6:
						typeName = '已取消'
						break;
				}
				return typeName
			},
			onOperate(id, type) {
				this.modal.id = id
				this.modal.type = type
				switch (type) {
					// 关闭订单
					case 1:
						this.modal.content = '是否确认取消订单'
						break;
					// 支付
					case 2:
						this.modal.content = '是否支付该订单'
						break;
					// 查看物流
					case 3:
					    uni.navigateTo({
					    	url: "/teaBureau/teaOrderLogistics/teaOrderLogistics?id=" + id
					    })
						return
						break;
					// 确认发货
					case 4:
						this.modal.content = '是否确认收货'
						break;
				}
				this.modal.confirm = '确定'
				this.modal.show = true
			},
			onSwitchDetail(id) {
				uni.navigateTo({
					url: "/teaBureau/teaOrderDetail/teaOrderDetail?id=" + id
				})
			},
			async modalConfirm() {
				switch (this.modal.type) {
					// 关闭订单
					case 1:
						await teaOrderCancel({
							order_id: this.modal.id
						})
						this.page = 1
						this.count = 0
						this.teaList = []
						this.status = 'loadmore'
						this.onGetTeaList()
						break;
						// 支付
					case 2:
						const res = await teaOrderPay({
							order_id: this.modal.id
						})
						await uni.requestPayment({
							provider: "wxpay",
							appId: res.data.order_str.appId,
							timeStamp: res.data.order_str.timeStamp,
							nonceStr: res.data.order_str.nonceStr,
							package: res.data.order_str.package,
							signType: res.data.order_str.signType,
							paySign: res.data.order_str.paySign,
							success() {
								uni.hideLoading()
								_this.page = 1
								_this.count = 0
								_this.teaList = []
								_this.status = 'loadmore'
								_this.onGetTeaList()
							},
							fail(err) {
								uni.hideLoading()
								uni.showLoading({
									title: err,
								})
							},
							complete() {
								uni.hideLoading()
							}
						})
						break;
						// 确认发货
					case 4:
						await teaOrderConfirm({
							order_id: this.modal.id
						})
						this.page = 1
						this.count = 0
						this.teaList = []
						this.status = 'loadmore'
						this.onGetTeaList()
						break;
				}
				this.modal.show = false
			},
			loadData() {
				if (this.status == 'nomore') return
				this.page++
				this.status = 'loading'
				this.onGetTeaList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_box {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 25rpx;

		.goods {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}

		.total {
			background: #FBFBFB;
			padding: 15rpx 20rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
		}

		.confirm {
			background: #B3723E;
			color: #fff;
			padding: 10rpx 30rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
		}

		.cancel {
			background: #000;
			color: #fff;
			padding: 10rpx 30rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
		}
	}
</style>